<script setup lang="ts">
import { getRoleListAPI, getRoleDetailAPI, getTreeListAPI, getUserListAPI, deleteRoleAPI } from '@/apis/system';
import type { RoleItem, TreeList, UserItem } from '@/types/system';
import { More, User } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue';

// 获取角色列表
const roleList = ref<RoleItem[]>([])
const getRoleList = async () => {
  const res = await getRoleListAPI()
  roleList.value = res.data
  const roleId = roleList.value[0].roleId!
  getRoleDetail(roleId)
  getUserList(roleId)
}
getRoleList()

// 点击激活的样式,并通过角色id获取角色权限
const activeRole = ref(0)
const rolePerms = ref<number[][]>([])
const changeRole = async (index: number, roleId: number) => {
  activeRole.value = index
  await getRoleDetail(roleId) // 等form表单的值改变,再渲染tree
  getUserList(roleId)
  // 重新获取树形列表,重置之前选中的项
  getTreeList()
}

// 获取所有功能权限列表 树形
const treeList = ref<TreeList[]>([])
const getTreeList = async () => {
  const res = await getTreeListAPI()
  treeList.value = res.data
}
getTreeList()

// 获取角色详情
const userTotal = ref(0) // 成员总数
const getRoleDetail = async (roleId: number) => {
  const res = await getRoleDetailAPI(roleId)
  rolePerms.value = res.data.perms
  userTotal.value = res.data.userTotal
}
// 选项卡 tabs 切换功能权限和成员
const activeName = ref<'tree' | 'member'>('tree')
// 查询角色关联的用户列表
const userList = ref<UserItem[]>([])
const getUserList = async (roleId: number) => {
  const res = await getUserListAPI(roleId)
  userList.value = res.data.rows
  console.log(userList.value);
}

// 删除角色
const delRole = async (id: number) => {
  ElMessageBox.confirm('确定删除该角色吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    try {
      await deleteRoleAPI(id)
      ElMessage.success('删除成功')
      getRoleList()
    } catch (error) {
      console.log(error);
    }
  }).catch(() => {})
}
</script>

<template>
  <div class="role-container">
    <div class="left-wrapper">
      <!-- 循环的角色项 -->
      <div class="role-item" v-for="(item, index) in roleList" :key="item.roleId"
        :class="{ active: activeRole === index }" @click="changeRole(index, item.roleId!)">
        <div class="role-info">
          <el-icon>
            <User />
          </el-icon>
          {{ item.roleName }}
        </div>
        <div class="more">
          <el-dropdown>
            <el-icon>
              <More />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="$router.push(`/roleAdd/${item.roleId}`)">
                  <el-button link>编辑角色</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button type="danger" link @click="delRole(item.roleId!)">删除</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </div>

      <el-button class="addBtn" size="small" @click="$router.push('/roleAdd')">添加角色</el-button>
    </div>

    <!-- 右侧内容区域 -->
    <div class="right-wrapper">
      <el-tabs v-model="activeName">
        <el-tab-pane label="功能权限" name="tree">
          <div class="tree-wrapper">
            <!-- 角色权限列表 -->
            <div v-for="(item, index) in treeList" :key="item.id" class="tree-item">
              <div class="tree-title"> {{ item.title }} </div>
              <!-- 树形组件 -->
              <el-tree :data="item.children" :props="{ label: 'title', disabled: () => true }" default-expand-all
                show-checkbox :default-checked-keys="rolePerms[index] || []" node-key="id" />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`成员${userTotal}`" name="member">
          <div class="user-wrapper">
            <el-table :data="userList" width="100%">
              <el-table-column type="index" width="250" label="序号" />
              <el-table-column prop="name" label="员工姓名" />
              <el-table-column prop="userName" label="登录账号" />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.role-container {
  display: flex;
  font-size: 14px;
  background-color: #fff;

  .left-wrapper {
    width: 200px;
    border-right: 1px solid #e4e7ec;
    padding: 4px;
    text-align: center;

    .role-item {
      position: relative;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      cursor: pointer;

      &.active {
        background: #edf5ff;
        color: #4770ff;
      }
    }

    .role-info {
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 10px;
        width: 20px;
      }
    }

    .more {
      display: flex;
      align-items: center;

      .icon {
        width: 15px;
      }
    }

    .addBtn {
      width: 100%;
      margin-top: 20px;
    }
  }

  .right-wrapper {
    flex: 1;

    .tree-wrapper {
      display: flex;
      justify-content: space-between;

      .tree-item {
        flex: 1;
        border-right: 1px solid #e4e7ec;
        padding: 0px 4px;
        text-align: center;

        .tree-title {
          background: #f5f7fa;
          text-align: center;
          padding: 10px 0;
          margin-bottom: 12px;
        }
      }
    }

    ::v-deep .el-tabs__nav-wrap {
      padding-left: 20px;
    }



    .user-wrapper {
      padding: 20px;
    }
  }
}

:deep(.el-tree-node[aria-checked="true"]) {
  background-color: #f6f6f6c8;
  /* 设置复选框选中项的背景颜色 */
}
</style>